<template>
  <div id="shop" class="flex-column">
    <!-- 上半部分 -->
    <section class="flex">
      <el-card style="width: calc(60% - 5px)">
        <template #header>
          <div class="card-header justify-between align-center">
            <span class="bold text-18">商店基本信息</span>
            <el-button class="button" icon="edit" type="text">编辑</el-button>
          </div>
        </template>
        <el-descriptions>
          <el-descriptions-item v-for="(value, key) in baseInfo" :key="key" :label="key">{{ value }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <div style="width: calc(40% - 5px)" class="m-l-10 flex-column">
        <el-card style="width: 100%" class="p-10 m-b-10 evaluation">
          <div class="flex text-main">
            <p class="flex-column flex-center">
              <i class="iconfont icon-haoping text-42"></i>
              <span class="m-t-3 text-14">好评</span>
            </p>
            <span class="m-l-5 text-20 l-h-42">1256</span>
          </div>
          <div class="flex text-yellow">
            <p class="flex-column flex-center">
              <i class="iconfont icon-zhongping1 text-42"></i>
              <span class="m-t-3 text-14">中评</span>
            </p>
            <span class="m-l-5 text-20 l-h-42">1256</span>
          </div>
          <div class="flex text-medium">
            <p class="flex-column flex-center">
              <i class="iconfont icon-chaping text-42"></i>
              <span class="m-t-3 text-14">差评</span>
            </p>
            <span class="m-l-5 text-20 l-h-42">1256</span>
          </div>
        </el-card>
        <div style="width: 100%" class="flex-1 flex">
          <el-card style="width: calc(50% - 5px)" class="text-main today text-middle">
            <p class="align-center">
              <i class="iconfont icon-dingdanliang text-42"></i>
              <span class="text-20 m-l-8 bold">今日订单量</span>
            </p>
            <span class="text-20">132 笔</span>
          </el-card>
          <el-card style="width: calc(50% - 5px)" class="text-main today text-middle m-l-10">
            <p class="align-center">
              <i class="iconfont icon-qiandai text-36"></i>
              <span class="text-20 m-l-8 bold">今日成交额</span>
            </p>
            <span class="text-20">263.22 千元</span>
          </el-card>
        </div>
      </div>
    </section>
    <!-- 下半部分 -->
    <section class="flex flex-1 m-t-10" style="overflow: auto">
      <div style="width: calc(50% - 5px)" class="flex-column">
        <el-card style="width: 100%; height: 50%" class="flex-column activity">
          <template #header>
            <span class="bold text-18">活动总览</span>
          </template>
          <el-table :data="tableData" height="0" style="width: 100%" class="flex-1 table">
            <el-table-column prop="state" label="状态" width="120" />
            <el-table-column prop="name" label="主题" show-overflow-tooltip />
            <el-table-column prop="range" label="活动范围" show-overflow-tooltip />
            <el-table-column prop="startDate" label="开始日期" width="120" />
            <el-table-column prop="endDate" label="截止日期" width="120" />
          </el-table>
        </el-card>
        <el-card style="width: 100%" class="m-t-10 flex-column flex-1 coupons">
          <template #header>
            <span class="bold text-18">优惠券总览</span>
          </template>
          <el-table :data="tableData" height="0" style="width: 100%" class="flex-1 table">
            <el-table-column prop="name" label="名称" show-overflow-tooltip />
            <el-table-column prop="details" label="详情" show-overflow-tooltip />
            <el-table-column prop="money" label="金额" width="120" />
            <el-table-column prop="startDate" label="开始日期" width="120" />
            <el-table-column prop="endDate" label="截止日期" width="120" />
          </el-table>
        </el-card>
      </div>

      <div class="flex-1 m-l-10 flex">
        <el-card style="width: calc(50% - 5px)" class="staff flex-column">
          <template #header>
            <span class="bold text-18">店员轮值情况</span>
          </template>
          <ul>
            <li class="justify-between m-t-16" v-for="(item, index) in 6" :key="index">
              <p class="text-15">张晓玲<span class="text-medium m-l-5">(id: wxy5846825)</span></p>
              <span class="text-yellow">当值</span>
            </li>
          </ul>
          <el-divider>没有更多了</el-divider>
        </el-card>
        <el-card style="width: calc(50% - 5px)" class="m-l-10 custom flex-column">
          <template #header>
            <span class="bold text-18">优质客户列表</span>
          </template>
          <ul>
            <li class="justify-between m-t-16" v-for="(item, index) in 25" :key="index">
              <p class="text-15">凌煜<span class="text-medium m-l-5">(id: wxy5846825)</span></p>
              <div class="flex">
                <p class="m-r-16 text-main"><i class="iconfont icon-dingdanliang"></i>23笔</p>
                <p class="text-yellow"><i class="iconfont icon-qiandai"></i>￥2300</p>
              </div>
            </li>
          </ul>
          <el-divider>没有更多了</el-divider>
        </el-card>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const baseInfo = reactive({
    '商店名称：': 'lucky star',
    '注册人：': '萧策安',
    '运营人数：': '3人',
    '法定代表人：': '沈兰舟',
    '注册账号：': 'Suzhou',
    '违规警告：': '0次',
    '法人联系电话：': '13526985642',
    '注册时间：': '2013-03-05',
    '统一社会信用代码：': 'WB452SU56987452165',
    '店长：': '萧策安',
    '店长账号：': 'dadada',
    '经营范围：': '互联网科技、广告文化、游戏'
  });

  const tableData = reactive([
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2016-05-02',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    },
    {
      state: '进行中',
      startDate: '2016-05-03',
      endDate: '2021-05-03',
      name: 'Tom',
      range: 'No. 189, Grove St, Los Angeles'
    }
  ]);
</script>

<style lang="scss">
  #shop {
    width: 100%;
    height: 100%;
    padding: 10px;

    .evaluation .el-card__body,
    .today .el-card__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    .activity .el-card__body,
    .coupons .el-card__body {
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      padding: 10px;
      height: 100%;
      box-sizing: border-box;
    }

    .staff .el-card__body,
    .custom .el-card__body {
      height: 100%;
      padding: 0 10px 10px 10px;
      box-sizing: border-box;
      overflow-y: scroll;
    }
  }
</style>
